<template>
  <div class="editor">
    <v-md-editor
        v-model="content"
        mode="editable"
        :disabled-menus="[]"
        placeholder="美好的一天，写下你的心情吧！"
        :autofocus="true"
        :include-level="[1,2,3,4,5,6]"
        left-toolbar="bold italic h strikethrough | ul ol quote code | image | table link hr | save undo redo clear"
        right-toolbar="preview sync-scroll toc fullscreen"
        upload-image-config="{ accept: 'image/*'}"
        height="635px"/>
    <div class="bth">
      <el-button type="danger" plain size="default" @click="saveContent">保存草稿</el-button>
      <el-button type="danger" size="default" @click="uploadContent">发布文章</el-button>
    </div>
  </div>

  <el-dialog v-model="dialogVisible" title="发布文章">
    <el-form v-model="articleFrom">
      <el-form-item prop="summary" label="文章摘要">
        <el-input v-model="articleFrom.summary" clearable placeholder="请输入摘要..."
                  type="textarea"/>
      </el-form-item>
      <el-form-item label="文章标签">
        <div class="tag">
          <el-button :icon="Plus">添加文章标签</el-button>
          <div class="tagItem"
               style="border: 1px solid rgba(0,0,0,0.2);height: 70px;width: 600px;padding: 10px;margin-top: 5px;border-radius: 5px">
            <span>最多选择3个标签专栏</span>
            <div
                style="width: 600px;display: flex;align-items: center;height: 1px;background-color:  rgba(0,0,0,0.1)"/>
            <el-checkbox-group v-model="articleFrom.tags">
              <el-checkbox :label="1">标签A</el-checkbox>
              <el-checkbox :label="2">标签B</el-checkbox>
              <el-checkbox :label="3">标签C</el-checkbox>
            </el-checkbox-group>
          </div>
        </div>
      </el-form-item>
      <el-form-item label="文章分类">
        <div class="typesOf">
          <el-button :icon="Plus">添加文章分类</el-button>
          <div class="tagItem"
               style="border: 1px solid rgba(0,0,0,0.2);height: 70px;width: 600px;padding: 10px;margin-top: 5px;border-radius: 5px">
            <span>最多选择3个分类专栏</span>
            <div
                style="width: 600px;display: flex;align-items: center;height: 1px;background-color:  rgba(0,0,0,0.1)"/>
            <el-checkbox-group v-model="articleFrom.types">
              <el-checkbox :label="1">分类A</el-checkbox>
              <el-checkbox :label="2">分类B</el-checkbox>
              <el-checkbox :label="3">分类C</el-checkbox>
            </el-checkbox-group>
          </div>
        </div>
      </el-form-item>
      <el-form-item label="文章类型">
        <el-radio-group v-model="articleFrom.typesOf">
          <el-radio :label="1">原创</el-radio>
          <el-radio :label="2">转载</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="发布形式">:
        <el-radio-group v-model="articleFrom.form">
          <el-radio :label="1">公开</el-radio>
          <el-radio :label="2">私密</el-radio>
          <el-radio :label="3">粉丝可见</el-radio>
        </el-radio-group>
      </el-form-item>
    </el-form>
    <div class="inBth">
      <el-button round size="default" @click="close">返回</el-button>
      <el-button round size="default" type="danger" @click="release">发布文章</el-button>
    </div>
  </el-dialog>

</template>

<script setup lang="ts">
import {reactive, ref} from "vue";
import {ElMessage} from "element-plus";
import {Plus} from '@element-plus/icons-vue'

interface articleFromType {
  summary?: string
  tags: string[]
  types: string[]
  typesOf: number
  form: number
}

const title = ref<string>('')
const content = ref<string>('456789')
const dialogVisible = ref<boolean>(false)
const articleFrom = reactive<articleFromType>({
  summary: '',
  tags: [],
  types: [],
  typesOf: 1,
  form: 1
})

const saveContent = () => {
  alert("保存")
}
const uploadContent = () => {
  if (content.value.length === 0 || content.value.trim().length === 0) {
    ElMessage.warning("内容不能为空！")
    return
  }
  dialogVisible.value = true
}
const release = () => {
  alert(JSON.stringify(articleFrom))
}
const close = () => dialogVisible.value = false

</script>

<style scoped lang="scss">
.editor {
  padding: 0;
  margin: 0;
  height: 100%;
  width: 100%;

  .bth {
    display: flex;
    align-items: center;
    justify-content: right;
    height: 45px;
  }
}

.inBth {
  width: 100%;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: right;
}

</style>